<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #l-map {
            height: 600px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=SeUxB6PBUamb8yEP3e463NCIivu7PO70">
    </script>


</head>

<body>

    <div id="l-map"></div>

    <script>


        var map = new BMap.Map("l-map");

        var myGeo = new BMap.Geocoder();

        myGeo.getPoint("天河区珠吉路58号津安创意园", function (point) {
            // 根据用户输入的具体地址获取该地址对应的经纬度信息
            // console.log(point);

            if (point) {
                // centerAndZoom 方法能够根据经纬度信息渲染一个地图，缩放级别是16
                map.centerAndZoom(point, 16);
                // 文本覆盖物的参数
                var opts = {
                    position: point,    // 指定文本标注所在的地理位置（经纬度）
                    // offset: new BMap.Size(30, -30)    //设置文本偏移量
                }

                // 添加一个文本覆盖物
                // 文本覆盖物可以自定义html结构来改变它的样子
                var label = new BMap.Label("<h1>黑马59期</h1>", opts);  // 创建文本标注对象
                // 给文本标记物设置样式
                label.setStyle({
                    color: "red",
                    fontSize: "12px",
                    height: "20px",
                    lineHeight: "20px",
                    fontFamily: "微软雅黑"
                });
                // 可以调用setContent()方法改变文本中的结构
                label.setContent(`<div>hello</div>`)

                // 给label注册一个点击事件
                label.addEventListener('click', () => {
                    alert('label触发')
                })

                map.addOverlay(label);

                // 给地图注册事件
                map.addEventListener('movestart', () => {
                    console.log('moveing.....');
                })
            }
        },
            "广州");

    </script>
</body>

</html>